<template>
	<view class="content">

		<view class="go_bar">
			<ul>
				<view>
					<li :class="{'active': isActive == 1}" @click="check(1)">
						资讯
						<view :class="{'active_border': isActive == 1}"></view>
					</li>
				</view>
				<view>
					<li :class="{'active': isActive == 2}" @click="check(2)">
						数据
						<view :class="{'active_border': isActive == 2}"></view>
					</li>
				</view>
				<view>
					<li :class="{'active': isActive == 3}" @click="check(3)">
						赛程
						<view :class="{'active_border': isActive == 3}"></view>
					</li>
				</view>
				<view>
					<li :class="{'active': isActive == 4}" @click="check(4)">
						排名
						<view :class="{'active_border': isActive == 4}"></view>
					</li>
				</view>
			</ul>
		</view>
		
		<view class="bottom">
			<view v-if="isActive == 1" style="margin-top: 100rpx;">
				<swiper>
					<swiper-item style="text-align: center;">
						<image src="../../static/img/banner.png" mode="scaleToFill"
							style="width: 700rpx; height: 300rpx;"></image>
					</swiper-item>
				</swiper>


				<view class="match_info">
					<scroll-view scroll-x="true" style="width: 100%; white-space: nowrap;">
						<view class="match_window">
							<view class="match_title">
								2021LPL夏季常规赛
								<view style="height: 160rpx; width: 100%; display: flex;">
									<view style="width:30%; height: 160rpx;text-align: center; vertical-align:middle">
										<image src="../../static/team_icon/TT.png" class="team_icon"></image>
										<view class="team_word">TT</view>
									</view>
									<view style="width:40%; height: 160rpx; text-align: center; vertical-align: middle">
										<view style="font-size: 10rpx; color: #000000; padding-top: 20rpx;">今天</view>
										<view
											style="font-size: 30rpx; font-weight: bold; color: #000000; padding-top: 6rpx;">
											15:00</view>
										<view
											style="font-size: 10rpx; color: #000000; padding-top: 6rpx; color: #D94532
; border-bottom: solid; border-bottom-width: 1rpx;">
											参与预测></view>
									</view>
									<view style="width: 30%; height: 160rpx;">
										<image src="../../static/team_icon/UP.png" class="team_icon"></image>
										<view class="team_word">UP</view>
									</view>
								</view>
							</view>
						</view>
						<view class="match_window">
							<view class="match_title">
								2021LPL夏季常规赛
								<view style="height: 160rpx; width: 100%; display: flex;">
									<view style="width:30%; height: 160rpx;text-align: center; vertical-align:middle">
										<image src="../../static/team_icon/LNG.jpg" class="team_icon"></image>
										<view class="team_word">LNG</view>
									</view>
									<view style="width:40%; height: 160rpx; text-align: center; vertical-align: middle">
										<view style="font-size: 10rpx; color: #000000; padding-top: 20rpx;">今天</view>
										<view
											style="font-size: 30rpx; font-weight: bold; color: #000000; padding-top: 6rpx;">
											17:00</view>
										<view
											style="font-size: 10rpx; color: #000000; padding-top: 6rpx; color: #D94532
; border-bottom: solid; border-bottom-width: 1rpx;">
											参与预测></view>
									</view>
									<view style="width: 30%; height: 160rpx;">
										<image src="../../static/team_icon/EDG.jpg" class="team_icon"></image>
										<view class="team_word">EDG</view>
									</view>
								</view>
							</view>
						</view>
						<view class="match_window">
							<view class="match_title">
								2021LPL夏季常规赛
								<view style="height: 160rpx; width: 100%; display: flex;">
									<view style="width:30%; height: 160rpx;text-align: center; vertical-align:middle">
										<image src="../../static/team_icon/IG.jpg" class="team_icon"></image>
										<view class="team_word">IG</view>
									</view>
									<view style="width:40%; height: 160rpx; text-align: center; vertical-align: middle">
										<view style="font-size: 10rpx; color: #000000; padding-top: 20rpx;">今天</view>
										<view
											style="font-size: 30rpx; font-weight: bold; color: #000000; padding-top: 6rpx;">
											17:00</view>
										<view
											style="font-size: 10rpx; color: #000000; padding-top: 6rpx; color: #D94532
; border-bottom: solid; border-bottom-width: 1rpx;">
											参与预测></view>
									</view>
									<view style="width: 30%; height: 160rpx;">
										<image src="../../static/team_icon/RA.jpg" class="team_icon"></image>
										<view class="team_word">RA</view>
									</view>
								</view>
							</view>
						</view>
						<view class="more_widow">
							<view></br></br></view>
							<view style="font-size: 25rpx; padding-left: 20rpx;"></br>查</br>看</br>更</br>多</view>
						</view>
					</scroll-view>
				</view>

				<view class="article">
					<view>
						<image src="../../static/scout.jpg" class="article_img"></image>
					</view>
					<view class="article_content">
						<view style="font-size: 40rpx; font-weight: bold;">
							LPL夏季赛8月5日首发名单，icon中路对决Scout
						</view>
						<view style="padding-top: 65rpx; font-size: 20rpx;">
							英雄联盟赛事官方 &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 10小时前
						</view>
					</view>
				</view>
				<view
					style="border: solid; border-color: #AAAAAA; margin-left: 20rpx; margin-right: 20rpx;border-width: 0.5rpx;">
				</view>
				<view class="article">
					<view>
						<image src="../../static/scout.jpg" class="article_img"></image>
					</view>
					<view class="article_content">
						<view style="font-size: 40rpx; font-weight: bold;">
							LPL夏季赛8月5日首发名单，icon中路对决Scout
						</view>
						<view style="padding-top: 65rpx; font-size: 20rpx;">
							英雄联盟赛事官方 &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 10小时前
						</view>
					</view>
				</view>
				<view
					style="border: solid; border-color: #AAAAAA; margin-left: 20rpx; margin-right: 20rpx;border-width: 0.5rpx;">
				</view>
				<view class="article">
					<view>
						<image src="../../static/scout.jpg" class="article_img"></image>
					</view>
					<view class="article_content">
						<view style="font-size: 40rpx; font-weight: bold;">
							LPL夏季赛8月5日首发名单，icon中路对决Scout
						</view>
						<view style="padding-top: 65rpx; font-size: 20rpx;">
							英雄联盟赛事官方 &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 10小时前
						</view>
					</view>
				</view>
				<view
					style="border: solid; border-color: #AAAAAA; margin-left: 20rpx; margin-right: 20rpx;border-width: 0.5rpx;">
				</view>
				<view class="article">
					<view>
						<image src="../../static/scout.jpg" class="article_img"></image>
					</view>
					<view class="article_content">
						<view style="font-size: 40rpx; font-weight: bold;">
							LPL夏季赛8月5日首发名单，icon中路对决Scout
						</view>
						<view style="padding-top: 65rpx; font-size: 20rpx;">
							英雄联盟赛事官方 &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 10小时前
						</view>
					</view>
				</view>
				<view
					style="border: solid; border-color: #AAAAAA; margin-left: 20rpx; margin-right: 20rpx;border-width: 0.5rpx;">
				</view>
				<view class="article">
					<view>
						<image src="../../static/scout.jpg" class="article_img"></image>
					</view>
					<view class="article_content">
						<view style="font-size: 40rpx; font-weight: bold;">
							LPL夏季赛8月5日首发名单，icon中路对决Scout
						</view>
						<view style="padding-top: 65rpx; font-size: 20rpx;">
							英雄联盟赛事官方 &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 10小时前
						</view>
					</view>
				</view>
				<view
					style="border: solid; border-color: #AAAAAA; margin-left: 20rpx; margin-right: 20rpx;border-width: 0.5rpx;">
				</view>
				<view class="article">
					<view>
						<image src="../../static/scout.jpg" class="article_img"></image>
					</view>
					<view class="article_content">
						<view style="font-size: 40rpx; font-weight: bold;">
							LPL夏季赛8月5日首发名单，icon中路对决Scout
						</view>
						<view style="padding-top: 65rpx; font-size: 20rpx;">
							英雄联盟赛事官方 &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 10小时前
						</view>
					</view>
				</view>
				<view
					style="border: solid; border-color: #AAAAAA; margin-left: 20rpx; margin-right: 20rpx;border-width: 0.5rpx;">
				</view>
				<view class="article">
					<view>
						<image src="../../static/scout.jpg" class="article_img"></image>
					</view>
					<view class="article_content">
						<view style="font-size: 40rpx; font-weight: bold;">
							LPL夏季赛8月5日首发名单，icon中路对决Scout
						</view>
						<view style="padding-top: 65rpx; font-size: 20rpx;">
							英雄联盟赛事官方 &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 10小时前
						</view>
					</view>
				</view>
				<view
					style="border: solid; border-color: #AAAAAA; margin-left: 20rpx; margin-right: 20rpx;border-width: 0.5rpx;">
				</view>

			</view>
			<view v-if="isActive == 2" style="margin-top: 100rpx;">
				数据界面
			</view>
			<view v-if="isActive == 3" style="margin-top: 100rpx;">
				赛程界面
			</view>
			<view v-if="isActive == 4" style="margin-top: 100rpx;">
				排名界面
			</view>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				isActive: 1
			}
		},
		onLoad() {

		},
		methods: {
			check(ty) {
				this.isActive = ty
			}
		}
	}
</script>

<style lang="scss" scoped>
	.go_bar {
		padding-left: 40rpx;
		padding-top: 50rpx;
		text-align: center;
	}

	ul {
		padding: 0;
		margin: 0;
	}

	ul li {
		float: left;
		text-align: center;
		vertical-align: middle;
		list-style: none;
		padding-right: 30rpx;
		font-size: 37rpx;
		color: gray;
	}

	.active {
		text-align: center;
		vertical-align: middle;
		font-size: 45rpx;
		color: black;
		margin-top: -7rpx;
	}

	.active_border {
		width: 40rpx;
		border-bottom-width: 12rpx;
		border-bottom-style: solid;
		border-bottom-color: #D94532
;
		margin-left: 25rpx;
		margin-top: 20rpx;
	}

	.match_info {
		margin-top: 40rpx;
		padding-top: 30rpx;
		background-color: #F0F0F0;
		height: 240rpx;
	}

	.match_window {
		display: inline-flex;
		width: 35%;
		height: 200rpx;
		border: none;
		text-align: center;
		font-size: 36upx;
		margin: 1% 1% 1% 4%;
		border-radius: 10rpx;
		background-color: white;
	}

	.more_widow {
		display: inline-flex;
		width: 8%;
		height: 200rpx;
		border: none;
		text-align: center;
		font-size: 36upx;
		margin: 1% 1% 1% 4%;
		border-radius: 10rpx;
		background-color: white;
		color: #888888;
	}

	.match_title {
		width: 100%;
		color: white;
		font-size: 8rpx;
		height: 40upx;
		background-color: #D94532
;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		text-align: center;
		vertical-align: middle;
		padding-top: 10rpx;
	}

	.team_icon {
		margin-top: 45rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.team_word {
		margin-top: -8rpx;
		font-size: 20rpx;
		color: black;
	}

	.article {
		padding-top: 50rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		width: 100%;
		height: 230rpx;
		background-color: white;
		display: inline-flex;
	}

	.article_img {
		width: 200rpx;
		height: 200rpx;
		text-align: center;
	}

	.article_content {
		margin-left: 30rpx;
	}
</style>
